<template>
  <view class="custom-checkbox">
    <!-- 单选模式 -->
    <view v-if="mode === 'single'" class="checkbox-item" v-for="item in list" :key="item.value" @click="handleSelect(item)">
      <view
        class="checkbox-box"
        :class="{ 'checkbox-box-selected': selectedValue === item.value }"
      >
        <text class="checkbox-label">{{ item.label }}</text>
      </view>
    </view>

    <!-- 多选模式 -->
    <view v-if="mode === 'multiple'" class="checkbox-item" v-for="item in list" :key="item.value" @click="handleSelect(item)">
      <view
        class="checkbox-box"
        :class="{ 'checkbox-box-selected': selectedValues.includes(item.value) }"
      >
        <text class="checkbox-label">{{ item.label }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 数据列表
    list: {
      type: Array,
      default: () => [],
    },
    // 模式：single（单选）或 multiple（多选）
    mode: {
      type: String,
      default: 'single',
    },
    // 默认选中的值（单选）
    value: {
      type: [String, Number],
      default: '',
    },
    // 默认选中的值（多选）
    values: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectedValue: this.value, // 单选选中的值
      selectedValues: this.values, // 多选选中的值
    };
  },
  methods: {
    // 处理选择事件
    handleSelect(item) {
      if (this.mode === 'single') {
        this.selectedValue = item.value;
        this.$emit('change', item); // 触发 change 事件
      } else if (this.mode === 'multiple') {
        const index = this.selectedValues.indexOf(item.value);
        if (index === -1) {
          this.selectedValues.push(item); // 添加选中
        } else {
          this.selectedValues.splice(index, 1); // 取消选中
        }
        this.$emit('change', this.selectedValues); // 触发 change 事件
      }
    },
    // // 处理选择事件
    // handleSelect(item) {
    //   if (this.mode === 'single') {
    //     this.selectedValue = item.value;
    //     this.$emit('change', item.value); // 触发 change 事件
    //   } else if (this.mode === 'multiple') {
    //     const index = this.selectedValues.indexOf(item.value);
    //     if (index === -1) {
    //       this.selectedValues.push(item.value); // 添加选中
    //     } else {
    //       this.selectedValues.splice(index, 1); // 取消选中
    //     }
    //     this.$emit('change', this.selectedValues); // 触发 change 事件
    //   }
    // },
  },
};
</script>

<style scoped>
.custom-checkbox {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  margin: 5rpx;
}

.checkbox-box {
	padding: 2rpx 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  transition: background-color 0.3s, border-color 0.3s;
}

.checkbox-box-selected {
  background-color: #33498d;
  border-color: #33498d;
}

.checkbox-label {
  font-size: 40rpx;
  color: #333;
  transition: color 0.3s;
}

.checkbox-box-selected .checkbox-label {
  color: #fff;
}
</style>